<template>
    <div class="kpi">
        <h2 class="kpi-title">KPI频道</h2>
        <el-tabs v-model="activeTab" class="kpi-tabs">
            <el-tab-pane
                v-for="item in kpiTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
            >
            </el-tab-pane>
        </el-tabs>        
        <div class="chart-box"> <!-- 图表的包裹区域 -->
            <keep-alive>
                <component :is="activeTab" v-if="activeTab"></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
    import finance from './finance.vue';
    import customer from './customer.vue';
    import customerDocument from './customerDocument.vue';
    import houseDocument from './houseDocument.vue';
    import './kpi.scss';

    export default {
        name: 'kpi',
        components: {
            finance,
            customer,
            customerDocument,
            houseDocument
        },
        data() {
            return {
                activeTab: 'finance', // 当前激活的tab
                kpiTabs: [] // 应用tabs的列表数据
            }
        },
        mounted() {
            this.getKpiTabs();            
        },
        methods: {
            getKpiTabs() { // 取tabs的数据
                setTimeout(() => {
                    this.kpiTabs = [
                        { id: 1, name: 'finance', title: '收费管理' },
                        { id: 2, name: 'customer', title: '客户服务' },                        
                        { id: 3, name: 'customerDocument', title: '客户档案' },
                        { id: 4, name: 'houseDocument', title: '房产档案' }
                    ];
                }, 20);
            }            
        }
    }
</script>

<style lang="scss" scoped>
.kpi {
    width: 1302px;
    height: 100%;
    .kpi-title {
        height: 42px;
        line-height: 42px;
        margin: 0;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        border-bottom: 1px solid #d9d9d9;
    }
    .kpi-tabs {
        ::v-deep {
            .el-tabs__nav-wrap {
                &::after {
                   background-color: transparent; 
                }
            }
            .el-tabs__active-bar {
                background-color: rgba(2,122,255, 0.85);
            }
            .el-tabs__item {
                color: rgba(0,0,0,.65);
                height: 42px;
                line-height: 42px;
                &.is-active {
                    color: rgba(2,122,255, 0.85);
                }
            }
        }
    }    
    .chart-box {
        height: calc(100% - 156px);
    }
}
</style>